<template>
    <Pop :show="account.popInvite" :is-title="false" @close="onClose">
        <div class="img-box">
            <img class="inv-img" :src="Gift" />
            <!-- <Vue3Lottie :animationData="animationData" :height="200" :width="200" /> -->
        </div>
        <div class="tip2">{{ $t('message.invitationRegister.b') }}
            <span class="num-mian">14999</span>
            {{ $t('message.invitationRegister.f') }}
        </div>
        <div class="tip1">{{ $t('message.invitationRegister.a') }}!!!</div>
        <form @submit.prevent="onSubmit">
            <v-btn class="me-4 submit-btn" color="primary" type="submit"> {{ $t('message.invitationRegister.g') }} </v-btn>
            <div class="tip3">{{ $t('message.invitationRegister.h') }}，<span class="m-color pit" @click="onLogin">{{
                $t('message.invitationRegister.i')
            }}</span></div>
        </form>
    </Pop>
</template>

<script lang="ts" setup>
import Pop from "@/components/pop/index.vue";
// import { toast } from "@/components/toast/toast";
import { useAccount } from "@/stores/account";
// import { Vue3Lottie } from "vue3-lottie";
import Gift from "@/assets/register_ gift.png";
import i18n from "@/locals";
// import lottie from "vue-lottie";
// console.log("lottie", lottie)
import animationData from "./wOU04UW84s.json";
console.log("animationData", animationData);

// import { ref } from "vue";

// const options = ref({
//     animationData: animationData
// })

const account = useAccount();

const onSubmit = () => {
    account.changePopRegister(true);
    account.changePopInvite(false);
};

const onClose = () => {
    account.changePopInvite(false);
};

const onLogin = () => {
    account.changePopLogin(true);
    account.changePopInvite(false);
};
</script>

<style lang="less" scoped>
@import url("./index.less");

.num-mian {
    color: var(--main);
}

.img-box {
    width: 100%;
    text-align: center;
    margin: 30px 0;
}

.inv-img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

.tip1 {
    font-size: 14px;

    margin-bottom: 40px;
    color: var(--color);

}

.tip2 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #fff;
}

.tip3 {
    font-size: 14px;
    text-align: center;
    color: var(--sub);
}

.submit-btn {
    width: 100%;
    margin-bottom: 20px;
}

.m-color {
    color: var(--main);
}

.pit {
    cursor: pointer;
}
</style>
